/**
 * 认证权限测试模块
 */

import React from 'react';
import { Card, Typography, Space, Tag, Alert } from 'antd';
import { useAuth } from '../../../contexts/AuthContext';
import { ConditionalRender } from '../../ProtectedRoute';

const { Paragraph, Text } = Typography;

const AuthTests: React.FC = () => {
  const { state, hasPermission } = useAuth();
  const { user, permissions } = state;

  return (
    <div>
      <Card title="当前用户信息" style={{ marginBottom: 16 }}>
        <Space direction="vertical">
          <div><Text strong>用户名:</Text> {user?.username}</div>
          <div><Text strong>邮箱:</Text> {user?.email}</div>
          <div><Text strong>是否超级用户:</Text> {user?.is_superuser ? '是' : '否'}</div>
          <div><Text strong>权限数量:</Text> {permissions.length}</div>
        </Space>
      </Card>

      <Card title="权限测试">
        <Paragraph>测试各种权限检查功能：</Paragraph>
        <Space direction="vertical">
          <div>用户管理权限: {hasPermission('user.view') ? '✅' : '❌'}</div>
          <div>角色管理权限: {hasPermission('role.view') ? '✅' : '❌'}</div>
          <div>数据血缘权限: {hasPermission('lineage.view') ? '✅' : '❌'}</div>
          <div>权限管理权限: {hasPermission('permission.view') ? '✅' : '❌'}</div>
          <div>路由管理权限: {hasPermission('route.view') ? '✅' : '❌'}</div>
        </Space>
      </Card>

      <Card title="条件渲染测试" style={{ marginTop: 16 }}>
        <Space direction="vertical" style={{ width: '100%' }}>
          <ConditionalRender condition="permission" value="user.view">
            <Alert message="您有用户查看权限" type="success" showIcon />
          </ConditionalRender>
          
          <ConditionalRender 
            condition="permission" 
            value="user.manage"
            fallback={<Alert message="您没有用户管理权限" type="warning" showIcon />}
          >
            <Alert message="您有用户管理权限" type="success" showIcon />
          </ConditionalRender>
          
          <ConditionalRender condition="role" value="admin">
            <Alert message="您是管理员" type="info" showIcon />
          </ConditionalRender>
          
          <ConditionalRender 
            condition="role" 
            value="admin"
            fallback={<Alert message="您不是管理员" type="info" showIcon />}
          >
            <Alert message="您是管理员" type="info" showIcon />
          </ConditionalRender>
        </Space>
      </Card>

      <Card title="用户权限列表" style={{ marginTop: 16 }}>
        <Space wrap>
          {permissions.map((permission, index) => (
            <Tag key={index} color="blue">
              {permission}
            </Tag>
          ))}
        </Space>
        {permissions.length === 0 && (
          <Text type="secondary">暂无权限</Text>
        )}
      </Card>
    </div>
  );
};

export default AuthTests;
